<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax with XML</title>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
	$(document).ready(function() {
		$.ajax({
			type : "GET",
			url : "sandwiches.xml",
			dataType : "xml",
			success : callback
		});
	});

	function callback(data, status) {
		var sandwiches = data.getElementsByTagName("sandwich");
		listSandwiches(sandwiches);
	}

	function listSandwiches(sandwiches) {
		var loopIndex;
		var selectControl = document.getElementById('sandwichList');
		for (loopIndex = 0; loopIndex < sandwiches.length; loopIndex++) {
			selectControl.options[loopIndex] = new Option(
					sandwiches[loopIndex].firstChild.data);
		}
	}

	function err(xhr, reason, ex) {
		$("div").text(reason);
	}
</script>
</head>
<body>
	<h1>Using $.ajax( ) to get XML</h1>
	<form>
		<select size="1" id="sandwichList">
			<option>Select a sandwich</option>
		</select>
	</form>
</body>
</html>